<template>
<div class="app-container">
  <el-form ref="form" :model="formData" label-width="90px" style="width: 400px;">
    <el-form-item label="名称">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="指定年份">
      <el-select v-model="formData.year" style="width:100%;" placeholder="请选择活动区域">
        <el-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="所属主题">
       <el-select style="width: 100%;" v-model="formData.theme_id" @change="themeChange">
          <el-option label="--- 请选择文档主题 ---" value='0'></el-option>
          <el-option v-for="option in options" 
            :key="option.value"
            :label="option.label"
            :value="option.value">
          </el-option>
        </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" :disabled="submiting" @click="onSubmit">更新</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</div>
</template>
<script>
import { getOptions } from '@/api/theme'
import { edit } from '@/api/report'
export default {
  name: 'DocEdit',
  data() {
    return {
      submiting: false,
      years: [],
      options: [],
      selectOptons: [1],
      formData: {
        name: '',
        url: '',
        code: '',
        year: 0,
        theme_id: '0',
        id: 0
      },
    }
  },
  watch: {
    target: function(nv, ov) {
      // 初始化
      this.initFormData()
    }
  },
  props:['target', 'type'],
  created() {
    this.loadThemeOption()
    this.makeYearOptions()
  },
  mounted() {
    console.log(this.target)
    this.initFormData()
  },
  methods: {
    initFormData() {
      if (this.target !== undefined) {
        this.formData.name = this.target.name,
        this.formData.year = this.target.year,
        this.formData.theme_id = this.target.theme_id+''
        this.formData.id = this.target.id
        this.formData.type = this.type
      }
    },
    // 获取主题选项
    loadThemeOption() {
      // 请求API获取
      getOptions().then(res => {
        this.options = res.items
      })
    },
    // 发布
    onSubmit() {
      this.submiting = true
      let themeId = this.formData.theme_id
      let data = {
        theme_id: themeId,
        name: this.formData.name,
        year: this.formData.year,
        type: this.formData.type,
        id: this.formData.id
      }
      edit(data).then(res => {
        this.$message.success("编辑成功!!!")
        this.submiting = false
        this.fileList = [];
        this.$refs.ossupload.reset = this.$refs.ossupload.reset + 1
        this.$emit('close');
      })
    },
    // 设定年options
    makeYearOptions() {
      let year = new Date().getFullYear()
      for (let y = 2016; y <= year; y++)
      {
        this.years.push({label: y, value: y})
      }
      this.formData.year = year
    }
  }
}
</script>

